<!-- 关联表单 -->
<template>
  <view>
    <van-field
      v-show="!props.hidden"
      is-link
      v-model="textValue"
      :label="props.formItem?.title"
      :name="props.formItem?.id"
      :placeholder="props.placeholder"
      :required="props.required"
      :readonly="props.readonly"
      :rules="rules"
      :input-align="FieldInputAlign.DEFAULT"
      @click="showPickerClick"
    >
      <template #input>
        <text />
      </template>
    </van-field>
    <view
      v-for="(item, i) in _value"
      :key="item.id"
      class="selected-process"
      @click="showProcess(item.id)"
    >
      <view style="display: flex; align-items: center">
        <text>{{ i + 1 }}. </text>
        <text class="margin-left-xs">{{ item.startUser?.name }}</text>
        <text class="margin-lr-xs van-multi-ellipsis--l2">
          {{ item.startTime }} 提交的 - {{ item.name }}
        </text>
        <van-icon class="el-icon-close" name="cross" size="30rpx" @click="_value.splice(i, 1)" />
      </view>
    </view>
    <van-popup style="height: 80%" v-model:show="showPicker" round position="bottom">
      <van-picker-group
        cancel-button-text="取消"
        confirm-button-text="确定"
        v-model:active-tab="activeTab"
        title="请选择"
        :tabs="['我发起的', '待我处理', '我已处理', '抄送我的']"
        @confirm="onConfirm"
        @cancel="onCancel"
      >
        <ProcessIndexSubmitList :code="props.processCode" @selectItem="selectItem" />
        <ProcessIndexUndoList :code="props.processCode" @selectItem="selectItem" />
        <ProcessIndexDoneList :code="props.processCode" @selectItem="selectItem" />
        <ProcessIndexCcmeList :code="props.processCode" @selectItem="selectItem" />
      </van-picker-group>
    </van-popup>
  </view>
</template>
<script setup lang="ts">
  import { isEmpty } from '@/utils/is';
  import { computed, ref, watch, watchEffect } from 'vue';
  import { evalFormual } from '@/utils/evalFormual';
  import { FieldInputAlign } from '@/enums/formEnum';
  import { isNotEmpty } from '../../utils/is';
  import { Toast } from '../../utils/uniapi/prompt';
  import { ProcessIndexModel } from '../../services/model/approveTask/approveResultModel';
  const container = ref(null);
  const emits = defineEmits(['update:value', 'update:formData', 'labelShow']);
  const props = defineProps({
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    formItem: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    required: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    formula: {
      type: Object,
      default: () => {
        return {
          showFormula: '', //回显用，因为包含表单字段的时候会出现表单名称
          calcFormula: '', //解析用，表单名称对应为formData.fieldxxxx
        };
      },
    },
    rule: {
      type: Object,
      default: () => null,
    },
    placeholder: {
      type: String,
      default: '请添加审批单',
    },
    processCode: {
      type: String,
      default: '',
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  });

  //解決提校验问题
  const textValue = computed(() => {
    return isNotEmpty(props.value) ? '1' : '';
  });
  const activeTab = ref(0);
  const selectedItems = ref<ProcessIndexModel[]>([]);
  const showPicker = ref(false);
  /** 计算属性：_value */
  const _value = computed({
    get() {
      return props.value;
    },
    set(val) {
      emits('update:value', val);
    },
  });

  /** 计算属性：_formData */
  const _formData = computed({
    get() {
      return props.formData;
    },
    set(val) {
      emits('update:formData', val);
    },
  });

  /** 校验规则 */
  const rules = computed(() => {
    if (isEmpty(props.rule)) {
      return [];
    } else {
      return props.rule;
    }
  });

  //子组件回调方法
  const selectItem = (data: ProcessIndexModel[]) => {
    selectedItems.value = data;
  };
  const doFormula = () => {
    let hidden = evalFormual(props.formula.calcFormula, props.formData);
    //如果隐藏，同时也隐藏label,通知父组件去隐藏，因为label不在当前界面
    //调用父组件FormDesignRender 的方法：
    emits('labelShow', props.formItem, hidden);
  };

  //确认选择
  const onConfirm = () => {
    if (isNotEmpty(selectedItems.value)) {
      selectedItems.value.forEach((item: ProcessIndexModel) => {
        //已添加的不再添加
        if (_value.value?.findIndex((v: any) => v.id === item.id) > -1) {
          return;
        }
        _value.value.push(item);
      });
    } else {
      _value.value = [];
    }
    showPicker.value = false;
  };

  //弹框控制
  const showPickerClick = () => {
    if (props.readonly) {
      Toast('当前字段不可编辑！');
      return;
    }
    showPicker.value = true;
  };
  //取消
  const onCancel = () => {
    showPicker.value = false;
  };
  const showProcess = () => {
    console.log('展示详情，加载详情组件');
  };

  watch(
    () => props.formData,
    () => {
      doFormula();
    },
    { immediate: true, deep: true },
  );
  //监听tab切换
  /*watchEffect(() => {
    console.log(activeTab.value);
  });*/
</script>
<style scoped lang="scss">
  .selected-process {
    width: 100%;
    padding: 20rpx 32rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    .el-icon-close {
      position: absolute;
      right: 32rpx;
      padding: 4rpx;
    }
  }
</style>
